import "../styles/MyTabbar.scss"
import React, { Component } from 'react';

class MyTabbar extends Component {
    constructor(props){
        super(props);
        this.state={
            currentIndex:0,
            tabs:[
                {icon:'',text:'店铺'},{icon:'',text:'分类'},{icon:'',text:'全部商品'},{icon:'',text:'购物车'},{icon:'',text:'个人中心'},
            ]
        }
    }
    handleClick(index){
        //更新下标
        this.setState({currentIndex:index})
    }
    render() {
        return (
            <div className="tabbar">
                {/* <span>店铺</span>
                <span>分类</span>
                <span>全部商品</span>
                <span>购物车</span>
                <span>个人中心</span> */}
                {
                    this.state.tabs.map((item,index)=>{
                        return (
                            <div className={'tab ' + (this.state.currentIndex==index?'active':'')} key={index} onClick={()=>{this.handleClick(index)}}>
                                <span className={'iconfont'+item.icon}></span>
                                <span className="text">{item.text}</span>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default MyTabbar;